<template>
	<el-button :id="'b' + columnId" @click="onClick" :loading="myLoading" :disabled="myDisabled" :type="myType">
		<template v-if="myIcon" #icon>
			<SvgIcon :name="myIcon" />
		</template>
		<slot>{{ myText }}</slot>
	</el-button>
</template>
<script lang="ts" setup name="zh-button">
import { useRequest } from 'vue-request';
import { ElMessage } from 'element-plus';
// 定义属性
const prop = defineProps({
	// 数据相关
	columnId: {
		// 字段ID、控件ID，用途非常广
		type: [Number, String],
		default: () => Math.floor(Math.random() * 1000000 + 1), // new Date().valueOf()
	},
	//url
	url: String,
	//功能编号
	funcCode: String,
	//是否加密
	cryptoEnabled:{
		type:Boolean,
		default:false
	},
	timeout:Number,
	//按钮文本
	text: String,
	//表单组件
	formRef: Object,
	//表格组件
	tableRef: Object,
	//按钮类型 :save 保存、add 新增 edit 编辑 del 删除 、reset 重置、query 查询、exp 导出、imp导入、print 打印 default:默认
	buttonType: {
		type: String,
		default: 'default',
	},
	//数据
	data: Object,
	loading: {
		type: Boolean,
		default: false,
	},
	disabled: {
		type: Boolean,
		default: false,
	},
	icon: [String, Object],
	type: {
		type: String,
	},
});
const myText = ref(prop.text);
let myLoading = ref(prop.loading);
let myDisabled = ref(prop.disabled);
const myIcon = ref<any>(prop.icon);
const myType: any = ref(prop.type);
const emit = defineEmits(['click']);

const onClick = async () => {
	//myLoading.value = true;
	if (prop.buttonType === null || prop.buttonType === undefined || prop.buttonType === 'default') {
		emit('click');
		return;
	}
	if (prop.buttonType === 'reset') {
		if (prop.formRef) {
			prop.formRef!.resetFields();
			if (prop.tableRef) {
				tableQueryRun();
			}
		} else {
			ElMessage({
				message: '重置按钮，必须传入表单参数',
				type: 'error',
			});
		}
		emit('click');
		return;
	}
	if (prop.formRef) {
		//表单校验
		let checkFlag = await prop.formRef!.checkForm();
		if (checkFlag) {
			send();
		} else {
			return;
		}
	} else {
		send();
	}
};
//表格查询事件
const queryTableService = () => {
	emit('click', true);
	if (prop.formRef) {
		return prop.tableRef!.query(prop.formRef.model,prop.timeout);
	} else {
		return prop.tableRef!.query(prop.data,prop.timeout);
	}
};
const { run: tableQueryRun, loading: queryLoading } = useRequest(queryTableService, {
	manual: true,
	debounceInterval: 1000,
	debounceOptions: {
		leading: true,
		maxWait: undefined,
		trailing: false,
	},
});
// 数据保存
const saveService = () => {
	let data: any = {};
	if (prop.formRef) {
		data = prop.formRef.model;
	} else {
		data = prop.data;
	}
	let url = ''; //有功能编号优先使用功能编号
	let config: any = {};
	let header:any={};
	if (prop.funcCode) {
		url = $api.common.send.url + prop.funcCode;
		header['func-code']=prop.funcCode
	} else {
		url = prop.url||'';
	}
	
    if (prop.timeout && prop.timeout > 0) {
      config.timeout = prop.timeout;
    }
	header.cryptoEnabled=prop.cryptoEnabled
	header.repeatEnabled="true"
	config.headers=header
	return $http
		.post(url, data,config)
		.then((res: any) => {
			let result = res.result;
			if (result.message) {
				ElMessage({
					message: result.message,
					type: 'success',
				});
			}
			emit('click', result);
		})
		.catch((err) => {
			emit('click', err);
		});
};
const { run: saveRun, loading: saveLoading } = useRequest(saveService, {
	manual: true,
	debounceInterval: 1000,
	debounceOptions: {
		leading: true,
		maxWait: undefined,
		trailing: false,
	},
});
const send = () => {
	if (prop.buttonType === 'query') {
		if (prop.tableRef) {
			tableQueryRun();
		} else {
			emit('click');
		}
		return;
	} else {
		if (prop.url || prop.funcCode) {
			saveRun();
		} else {
			emit('click');
		}
	}
};
onBeforeMount(() => {
	if (prop.buttonType === 'reset') {
		if (prop.text === null || prop.text === undefined) {
			myText.value = '重置';
		}
		if (prop.icon === null || prop.icon === undefined) {
			myIcon.value = 'ele-RefreshRight';
		}
		
	} else if (prop.buttonType === 'save') {
		//保存
		if (prop.icon === null || prop.icon === undefined) {
			myIcon.value = 'ele-DocumentChecked';
		}
		if (prop.type === null || prop.type === undefined) {
			myType.value = 'primary';
		}
	} else if (prop.buttonType === 'add') {
		//新增
		if (prop.icon === null || prop.icon === undefined) {
			myIcon.value = 'basefont icon-plus';
		}
		if (prop.type === null || prop.type === undefined) {
			myType.value = 'success';
		}
	} else if (prop.buttonType === 'edit') {
		//编辑
		if (prop.icon === null || prop.icon === undefined) {
			myIcon.value = 'ele-Edit';
		}
		if (prop.type === null || prop.type === undefined) {
			myType.value = 'warning';
		}
	} else if (prop.buttonType === 'del') {
		//删除
		if (prop.icon === null || prop.icon === undefined) {
			myIcon.value = 'ele-Delete';
		}
		if (prop.type === null || prop.type === undefined) {
			myType.value = 'danger';
		}
	} else if (prop.buttonType === 'query') {
		//查询
		if (prop.icon === null || prop.icon === undefined) {
			myIcon.value = 'ele-Search';
		}
		if (prop.type === null || prop.type === undefined) {
			myType.value = 'primary';
		}
	} else if (prop.buttonType === 'print') {
		//打印
		if (prop.icon === null || prop.icon === undefined) {
			myIcon.value = 'ele-Printer';
		}
		if (prop.type === null || prop.type === undefined) {
			myType.value = 'info';
		}
	} else if (prop.buttonType === 'imp') {
		//导入
		if (prop.icon === null || prop.icon === undefined) {
			myIcon.value = 'ele-Upload';
		}
		if (prop.type === null || prop.type === undefined) {
			myType.value = 'success';
		}
	} else if (prop.buttonType === 'exp') {
		//导出
		if (prop.icon === null || prop.icon === undefined) {
			myIcon.value = 'ele-Download';
		}
		if (prop.type === null || prop.type === undefined) {
			myType.value = 'warning';
		}
	} else if (prop.buttonType === 'auth') {
		//查询
		if (prop.icon === null || prop.icon === undefined) {
			myIcon.value = 'ele-Stamp';
		}
		if (prop.type === null || prop.type === undefined) {
			myType.value = 'primary';
		}
	} else if (prop.buttonType === 'default') {
		if (prop.type === null || prop.type === undefined) {
			myType.value = 'primary';
		}
	}
});
watch(
	() => prop.loading,
	(val) => {
		myLoading.value = val;
		myDisabled.value = val;
	}
);
watch(
	() => prop.disabled,
	(val) => {
		myDisabled.value = val;
	}
);
watch(
	() => queryLoading.value,
	(val) => {
		myLoading.value = val;
		myDisabled.value = val;
	}
);
watch(
	() => saveLoading.value,
	(val) => {
		myLoading.value = val;
		myDisabled.value = val;
	}
);
watch(
	() => prop.icon,
	(val) => {
		myIcon.value = val;
	}
);
watch(
	() => prop.type,
	(val) => {
		myType.value = val;
	}
);
</script>
<style lang="scss" scoped></style>
